<template>
  <div style="height:calc(100vh - 116px);">
    <el-card class="box-card" style="height: 100%;">
      <el-row :gutter="10">
        <el-col :span="5" style="border-right:2px solid #f2f5f8;padding-top:16px;">
          <el-button :disabled="!nodeData.id" type="danger" @click="bnt_delete">删 除</el-button>
          <el-button type="primary" @click="getTreeData">刷 新</el-button>
          <el-divider style="margin: 10px 0;" />
          <Scroll :height="treeHeigth">
            <Tree v-if="treeFlag" ref="tree" :data="treeNodeData" :show-checkbox="false"  @on-select-change="nodeClick" />
            <Spin v-if="loading" size="large" fix />
          </Scroll>
        </el-col>
        <el-col :span="12" style="padding-top: 56px;">
          <treeDetail :node-data="nodeData" @refresh="getTreeData" />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
>>>.el-divider--horizontal{
  margin: 12px 0;
}
</style>

<script>
import treeDetail from './components/treeDetail'
import Utils from '@/utils/util'
import { getPermissions, delPermission } from '@/api/home_'
import htmixin from '@/mixins/htmixin.js'
export default {
  name: 'Manage',
  components: { treeDetail },
  mixins: [htmixin],
  data() {
    return {
      treeFlag: false,
      nodeData: {}, // 当前选中节点数据
      treeNodeData: [], // 树形节点数据
      treeHeigth: 620, // 树形节点盒子的高（自适应）
      loading: false // 刷新加载提示
    }
  },
  created() {
    this.getTreeData()
  },
  mounted() {
    // 设置高度
    if (this.$refs.tree && this.$refs.tree.$el) {
      this.treeHeigth = window.innerHeight - this.$refs.tree.$el.offsetTop - 230
    }
    const that = this
    window.onresize = () =>
      (() => {
        if (this.$refs.tree && this.$refs.tree.$el) {
          that.treeHeigth = window.innerHeight - this.$refs.tree.$el.offsetTop - 230
        }
      })()
  },
  methods: {
    // 监听当前节点数据选择
    nodeClick(v) {
      this.nodeData = v[0] ? v[0] : {}
    },
    // 获取树型数据
    getTreeData() {
      this.loading = true
      this.treeFlag = false
      getPermissions().then(res => {
        this.loading = false
        if (res.code == 200) {
          const newData = Utils.sortByOrder(res.data)
          this.nodeData = {}
          this.treeNodeData = newData
          this.treeFlag = true
          sessionStorage.setItem('treeList', JSON.stringify(newData))
        } else {}
      })
    },
    isSureDeleteSelectNode(v) {
      delPermission({ permission_id: v }).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
          this.getTreeData()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 删除按钮
    bnt_delete() {
      // const selectNode = this.$refs.tree.getCheckedNodes() // 获取勾中的节点数据
      // const ids = selectNode.map(item => {
      //   return item.id
      // })
      let ids = this.nodeData.id

      if (!ids) {
        this.$message.error('请选择要删除的节点！')
        return
      }
      this.$Modal.confirm({
        title: '提示！',
        content: '是否删除选中节点数据？',
        onOk: () => {
          this.isSureDeleteSelectNode(ids)
        }
      })
    }
  }
}
</script>
